<template>
  <div class="dashboard-editor-container">

    <el-row>
      <el-col :span="17" style="width: 66.2%;">
        <div class="top-content" style="margin-right: 3px;">
          <!-- <div style="width: 100%;padding: 20px;">
            <el-input v-model="searchContent" placeholder="请输入内容" style="max-width: 423px;"></el-input>
            <el-button type="success" round style="margin-left: 20px;" icon="el-icon-search">搜索</el-button>
            <el-button type="warning" round style="margin-left: 20px;" icon="el-icon-refresh">重置</el-button>
          </div> -->
          <div style="position:absolute;left: 20px;height: 30px;display: flex;">
            <div class="count-content" style="background-color: rgba(204, 240, 222, 1);">
              <img src="@/assets/images/u664.svg" alt="" width="20">
              <span style="color: #00B359;">正常&nbsp; &nbsp;{{ normalCount }}</span>
            </div>
            <div class="count-content" style="background-color: rgba(254, 229, 204, 1);">
              <img src="@/assets/images/u667.svg" alt="" width="20">
              <span style="color: #fcc100;">延时&nbsp; &nbsp;{{ timeoutCount }}</span>
            </div>
            <!-- <div class="count-content" style="background-color: rgba(254, 220, 220, 1);">
              <img src="@/assets/images/u670.svg" alt="" width="20">
              <span style="color: red;">异常&nbsp; &nbsp;{{ errorCount }}</span>
            </div> -->
          </div>
          <graph-chart :chart-data="graphChartData" @childMessage="childMessage" />
          <!-- <map-chart
            :chart-data="graphChartData"
            :chartPoints="chartPoints"
            :chartLinesData="chartLinesData"
            @childMessage="childMessage" /> -->
        </div>
      </el-col>
      <el-col :span="7" style="width: 33.8%;">
        <div class="top-content" style="border-top: 4px solid rgba(250, 80, 80, 1);padding: 0 24px;">
          <div class="title-content" style="margin-top: 40px;width: 100%;">
            设备信息
          </div>
          <div style="width: 100%;margin-top: 5px;display: flex;">
            <!-- <img src="@/assets/images/u709.svg" alt="" style="float: left;"> -->
            <div style="width: 290px;">
              <el-carousel height="150px" :interval="5000" arrow="always" @change="changeArrow">
                <el-carousel-item v-for="(item,index) in hardList" :key="index">
                  <img :src="baseUrl+item.hardLogo" v-if="item.hardLogo" alt="" style="width: 100%;height: 100%;">
                  <img src="@/assets/images/u709.svg"  v-if="!item.hardLogo" alt="" style="width: 100%;height: 100%;">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div style="float: left;margin-left: 40px;font-size: 14px;">
              <span>设备名称：{{hardObj?hardObj.deviceName:''}}</span><br>
              <span>设备品牌：{{hardObj?hardObj.equipmentBrand:''}}</span><br>
              <!-- <span>地点：{{hardObj?hardObj.place:''}}</span><br> -->
              <span>运行状况：{{hardObj?$getDict(hardObj.healthStatus,dictList):''}}</span><br>
              <span>CPU使用率：{{hardObj?hardObj.cpuPercent:''}}%</span><br>
              <span>存储总量：{{hardObj?hardObj.totalStorage:''}}GB</span>
            </div>
          </div>
          <div>
            <div class="title-content" style="margin-top: 40px;margin-bottom: 10px;width: 100%;">
              应用信息
            </div>
            <div style="display: flex;height:105px;overflow-x: auto;">
              <div v-for="item in softListLogo" :key="item" v-if="softListLogo.length > 0" style="width: 75px;text-align: center;">
                <img :src="baseUrl+item.softLogo" alt="" style="width: 75px;height: 75px;border-radius: 50px;">
                <p>{{item.softwareName}}</p>
              </div>
              <img src="@/assets/images/u709.svg"  v-if="softListLogo.length == 0" alt="" style="width: 80px;height: 80px;">
            </div>
          </div>
          <!-- <div style="margin-top: 20px;margin-bottom: 20px;height: 150px;">
            <el-row :gutter="30">
              <el-col :span="24">
                <div class="title-content">CPU使用率</div>
                <line-chart :chart-data="lineChartData" />
              </el-col>
            </el-row>
          </div> -->
          <div style="margin-top: 40px;margin-bottom: 20px;height: 150px;">
            <el-row :gutter="30">
              <el-col :span="24">
                <div class="title-content">数据时延数字</div>
                <bar-chart :chart-data="barChartData" />
              </el-col>
            </el-row>
          </div>

          <!-- <el-table v-loading="loading" :data="postList" stripe :cell-style="cellStyle" :row-style="{height:'20px'}">
            <el-table-column label="发生时间" align="center" prop="occurrenceTime"  width="100" >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.occurrenceTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" width="50"/>
            <el-table-column label="TraceID" align="center" prop="traceId" show-overflow-tooltip/>
            <el-table-column label="请求地址" align="center" prop="requestAddress" show-overflow-tooltip/>
            <el-table-column label="服务/应用" align="center" prop="servicesApplications" show-overflow-tooltip/>
            <el-table-column label="响应时间" align="center" prop="responseTime" show-overflow-tooltip/>
          </el-table> -->
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import BarChart from './components/BarChart'
import GraphChart from './components/GraphChart'
import MapChart from './components/mapChart'
import LineChart from './components/LineChart'

import {linkTopologyListCenter} from '@/api/system/center'
import {listData} from '@/api/system/dict/data'
import {listCenter} from '@/api/system/center'
import {listUsage} from '@/api/system/usage'
import { time } from 'echarts'

export default {
  name: 'monitoring',
  components: {
    GraphChart,
    MapChart,
    LineChart,
    BarChart
  },
  data() {
    return {
      searchContent: '',
      normalCount: '0',
      timeoutCount: '0',
      errorCount: '0',
      baseUrl: process.env.VUE_APP_BASE_API,
      hardList: [],
      dictList: [],
      softList: [],
      softListLogo: [],
      hardObj: {},
      deviceIdArr: [],
      postList: [
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        },
        {
          "id": "1", "responseTime": "58.24ms", "occurrenceTime": "2024-03-12 14:16:34","status": "正常", "traceId": "528cb37e49sf34",
          "requestAddress": "com.bonree.autojob", "servicesApplications": "Alert_run_*.jar",
        }
      ],
      lineChartData: {
        expectedData: [],
        actualData: [],
        title: '备份节点'
      },
      barChartData: {
        expectedData: [],
        actualData: [],
        title: '数据时延数字'
      },
      graphChartData: {
        nodeData: [],
        linksData: []
      },
      chartPoints: [],
      chartLinesData: [],
      graphDataList: [
        { name: '容灾备份中心', status: '00',id: null},
        // { name: 'node2', status: '0'},
        // { name: 'node3', status: '1'},
        // { name: 'node4', status: '0'},
        // { name: 'node5', status: '1'},
        // { name: 'node6', status: '0'},
        // { name: 'node7', status: '0'},
        // { name: 'node8', status: '1'},
        // { name: 'node9', status: '2'},
        // { name: 'node10', status: '0'},
        // { name: 'node11', status: '0'},
        // { name: 'node12', status: '0'},
        // { name: 'node13', status: '0'},
        // { name: 'node14', status: '2'},
        // { name: 'node15', status: '0'},
      ],
      graphColors: ['#ccf0de', '#fee5cc', '#fedcdc', '#719990']
    }
  },
  created() {
    this.getDicts()
    this.getList();
    this.getLinkTopologyList(null)
    this.getlistUsage()
  },
  methods: {
    childMessage(msg) {
      this.getLinkTopologyList(msg)
    },
    // cpu使用率
    getlistUsage() {
      listUsage().then((res) => {
        this.lineChartData.expectedData = res.rows.map((item) => {
          return item.cpuPercent
        })
        this.lineChartData.actualData = res.rows.map((item) => {
          return item.extend1
        })
      })
    },
    /** 查询字典数据列表 */
    getDicts() {
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
        dictType: 'health_status',
      }
      listData(queryParams).then(response => {
        this.dictList = response.rows;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = false;
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
      }
      listCenter(queryParams).then((res) => {
        let arr = res.rows.map((item) => {
          return {
            name: item.dataCenterId,
            status: item.status,
            id: item.id
          }
        })
        this.graphDataList = this.graphDataList.concat(arr)
        console.log(this.graphDataList,'this.graphDataList ');
        let arr0 = []
        let arr1 = []
        let arr3 = []

        for (var i = 0; i<this.graphDataList.length; i++) {
          if(this.graphDataList[i].status == 0) {
            arr0.push(this.graphDataList[i])
            this.normalCount = arr0.length - 1;
          }
          if(this.graphDataList[i].status == 1) {
            arr1.push(this.graphDataList[i])
            this.timeoutCount = arr1.length;
          }
          if(['2','3','4'].includes(this.graphDataList[i].status)) {
            arr3.push(this.graphDataList[i])
            this.errorCount = arr3.length;
          }

          this.graphChartData.nodeData[i] = {
              name: this.graphDataList[i].name,
              id: this.graphDataList[i].id
          };

          // "容灾备份中心"
          if (this.graphDataList[i].status=='00') {
            this.graphChartData.nodeData[i].itemStyle = {
                color: this.graphColors[3]
            };
          }
          if (this.graphDataList[i].status==0) {
            // 正常
            this.graphChartData.nodeData[i].itemStyle = {
                color: this.graphColors[0]
            };
          } else if (this.graphDataList[i].status==1) {
            // 延时
            this.graphChartData.nodeData[i].itemStyle = {
                color: this.graphColors[1]
            };
          } else {
            // 异常
            this.graphChartData.nodeData[i].itemStyle = {
                color: this.graphColors[2]
            };
          }
          // if (i > 0) {
            this.graphChartData.linksData.push({
              source: 0,
              target: i
            })
          // }
        }
      })
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "状态" && row.row.status === "正常") {
        return {padding:'0px', color: '#3DD4A7'};
      } else {
        return {padding:'0px'};
      }
    },

    getLinkTopologyList(params) {
      linkTopologyListCenter({id: params?params: 1}).then((res) => {
        if(res.hardList.length > 0 && res.hardList[0] != null) {
          this.hardList = res.hardList.map((item) => {
            return {
              ...item,
              cpuPercent: ((item.totalStorage - item.availableCapacity) / item.totalStorage * 100).toFixed(1)
            }
          })
          this.hardObj = this.hardList[0]

          this.deviceIdArr.push(res.hardList[0].deviceId)

          this.barChartData.expectedData = res.hardList.map((item) => {
            return item.dataDelayDigits?item.dataDelayDigits:1
          })
          this.barChartData.actualData = res.hardList.map((item) => {
            return item.deviceName
          })
          console.log(this.barChartData.expectedData,'this.barChartData.expectedData');
        }else {
          this.$modal.msgWarning("暂无数据");
        }
        // 应用Logo
        if(res.softList.length > 0 && res.softList[0] != null) {
          this.softList = res.softList;

          this.softListLogo = this.softList.filter(item => this.deviceIdArr.includes(Number(item.deviceId)))
        } 
        
      })
    },
    changeArrow(val) {
      this.deviceIdArr = []
      this.hardList.forEach((item,index) => {
        if(index == val) {
          this.hardObj = item
          this.deviceIdArr.push(item.deviceId)
        }
      });
      
      this.softListLogo = this.softList.filter(item => this.deviceIdArr.includes(Number(item.deviceId)))
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.top-content {

  height: 787px !important;
  background-color: #fff;
  border: none;
  box-shadow:rgba(0, 0, 0, 0.35) 2px 2px 3px 0px;
  margin-bottom: 20px;
}
.title-content {
  // color: rgba(0, 0, 0, 0.427);
  font-size: 16px;
  font-weight: 800;
}
.count-content {
  width: 100px;
  background-color: rgba(204, 240, 222, 1);
  border-radius: 15px;
  height: 30px;
  padding: 5px;
  margin-right: 10px;
  img {
    float: left;
    margin-right: 8px;
  }
  span {
    line-height: 20px;
    font-weight: 700;
    font-size: 14px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }

}
</style>
